<template lang="html">
  <div class="dropdown-li">
    <i class="material-icons"> {{ icon }} </i>
    <span> <slot></slot> </span>
  </div>
</template>

<script>
export default {

  props: {
    title: { type: String, default: '' },
    icon: { type: String, default: '' }
  }
}
</script>

<style lang="scss" scoped>

.dropdown-li {
  height: 34px;
  width: 126px;
  font-size: 14px;

  &:hover {

    background-color: #f5f5f5;
    cursor: pointer;

    i {
      color: #9c9c9c;
    }
  }

  i {
    height: 34px;
    font-size: 20px;
    line-height: 34px;
    display: inline-block;
    vertical-align: middle;
    margin: 0px 14px;

  }

  span {
    display: inline-block;
    vertical-align: middle;
    line-height: 34px;
    padding: 0;
    margin: 0;
  }
}
</style>
